<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="root">
        <p>{{name}}</p>
        <div class="container">
            <div class="left">
                <p><router-link to="/foo">Go to Foo</router-link></p>
                <p><router-link to="/bar">Go to Bar</router-link></p>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </div>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    // 定义路由组件
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    // 定义路由
    const router = new VueRouter({
        // base: '/',
        // mode: 'history',
        routes: [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar }
        ]
    });
    console.log(123)
    Vue.use(VueRouter);
    let vue = new Vue({
        el: '#root',
        data() {
            return {
                name: '测试VueRouter'
            }
        },
        router
    })
</script>
</html>